<!-- SideMenu.vue -->
<template>
  <el-menu 
    :collapse="collapse"
    :default-active="activeMenu"
    router
    unique-opened
  >
    <MenuItem 
      v-for="item in menuData" 
      :key="item.path" 
      :item="item"
    />
  </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores'

const props = defineProps({
    collapse: Boolean,
    menuData: Array
})

const route = useRoute()
const authStore = useAuthStore()
const activeMenu = ref(localStorage.getItem('activeMenu') || '')

// 监听路由变化保存当前激活的菜单
watch(() => route.path, (path) => {
    if (path && authStore.isAuthenticated) {
        activeMenu.value = path
        localStorage.setItem('activeMenu', path)
    }
})
</script>